<template>
  <common-page :title="info.status === 1 ? '上线申请' : '下线申请'">
    <el-button slot="header" @click="back">返回</el-button>
    <el-button
      slot="header"
      @click="submitForm"
      type="primary"
      :loading="buttonLoading"
      v-if="!isDetail"
      >保存</el-button
    >
    <div slot="content" class="asset-online" v-loading="infoLoading">
      <div class="asset-online-container">
        <!-- step组件 -->
        <div class="custom-step">
          <template v-for="(item, index) in stepList">
            <!-- 初审不通过，不展示复审节点；撤销，不展示初审和复审节点 -->
            <div
              v-if="
                (index !== 1 && index !== 2) ||
                (index === 2 &&
                  (info.step !== 2 ||
                    info.status !== 2 ||
                    (records.length && records.length !== 3)) &&
                  info.status !== 3) ||
                (index === 1 && info.status !== 3)
              "
              :class="[
                'step-item',
                active >= index ? 'active-step-item' : null,
              ]"
            >
              <div
                class="step-icon"
                :class="{
                  'active-step-icon': active >= index,
                  'active-large': active === index,
                }"
              ></div>
              <div
                class="step-line"
                :class="{
                  'active-step-line': active > index,
                  'active-step-next-line': active === index,
                }"
                v-if="index < stepList.length - 1"
              ></div>
              <div class="step-info">
                <span
                  :class="{
                    'active-step-info': active > index,
                    'active-color': active === index,
                  }"
                  >{{ item.stepName }}</span
                >
                <span
                  class="info-describe"
                  style="margin-top: 10px"
                  v-if="item.stepName !== '审批完成'"
                  >{{ item.userName }}</span
                >
                <span
                  class="info-describe"
                  v-if="item.stepName !== '审批完成'"
                  >{{ item.createTime }}</span
                >
              </div>
            </div>
          </template>
        </div>
        <!-- 信息 -->
        <div class="asset-online-title">{{ details.systemName }}</div>
        <div class="container-border">
          <common-group-title title="系统简介" />
          <div class="overview">{{ details.introduce }}</div>

          <common-group-title title="负责人" />
          <div class="overview">{{ details.principal }}</div>

          <common-group-title title="资产明细" />
          <div class="assetsDetailed">
            <div class="assetsDetailed-table">
              <common-table
                class="assetsDetailed-table"
                :data="list"
                border
                height="100%"
                v-loading="loading"
              >
                <el-table-column
                  prop="url"
                  align="left"
                  label="URL"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="操作"
                  align="left"
                  width="80px"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button type="text" @click="hanldeDetail(scope.row)"
                      >详情
                    </el-button>
                  </template>
                </el-table-column>
              </common-table>
            </div>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="pageNum"
              :limit.sync="pageSize"
              @pagination="getList"
            />
          </div>
          <common-group-title title="上线API功能介绍" />
          <div class="overview">{{ details.onLineIntroduce }}</div>

          <common-group-title title="是否包含敏感信息" />
          <div class="overview">
            {{ details.isSensitive === 0 ? "否" : "是" }}
          </div>

          <common-group-title title="申请理由" />
          <div class="overview">
            {{ details.applyReason ? details.applyReason : "暂无" }}
          </div>

          <common-group-title title="附件" />
          <template v-if="details.fileList.length">
            <div
              class="overview files"
              v-for="(item, index) in details.fileList"
              @click="hanldeClick(item)"
            >
              {{ item.fileName }}
            </div>
          </template>
          <template v-else>
            <div class="overview">暂无附件</div>
          </template>

          <div class="assetsDetailed" v-if="!isDetail">
            <el-form
              class="apply-form"
              ref="form"
              :model="form"
              :rules="rules"
              label-width="75px"
              @submit.native.prevent
            >
              <el-form-item label="审批结果" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">不通过</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="理由" prop="approveReason">
                <common-input
                  v-model="form.approveReason"
                  placeholder="请输入"
                  type="textarea"
                  :maxlength="255"
                  clearable
                />
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 审批记录 -->
        <div class="asset-online-title">审批记录</div>
        <div class="container-border">
          <div class="assetsDetailed-table">
            <common-table class="assetsDetailed-table" :data="records">
              <el-table-column
                prop="url"
                align="left"
                label="序号"
                width="50px"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>

              <el-table-column
                prop="url"
                align="left"
                label="流程节点"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{
                    scope.row.step === 0
                      ? "创建审批"
                      : scope.row.step === 1
                      ? "业务初审"
                      : scope.row.step === 2
                      ? "安全复核"
                      : scope.row.status === 3
                      ? "流程撤销"
                      : "审批完成"
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="approveName"
                align="left"
                label="操作人"
                show-overflow-tooltip
              />
              <el-table-column
                prop="createTime"
                align="left"
                label="操作时间"
                show-overflow-tooltip
              />
              <el-table-column
                prop="approveSuggest"
                align="left"
                label="审批结果"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{
                    scope.row.step !== 0
                      ? scope.row.status === 1
                        ? "通过"
                        : scope.row.status === 3
                        ? "已撤销"
                        : "不通过"
                      : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="approveSuggest"
                align="left"
                label="审批意见"
                show-overflow-tooltip
              />
            </common-table>
          </div>
        </div>
      </div>
    </div>

    <detail ref="assetDetail"></detail>
  </common-page>
</template>

<script>
import {
  query,
  edit,
  reExamine,
  deleteApiExamine,
} from "@/api/apisecurity/assetsReview/assetsReview";
import Detail from "../../apiinterface/components/detail.vue";
import { mapGetters } from "vuex";
import { _deepClone } from "@/utils";

export default {
  name: "index",
  components: {
    Detail,
  },
  computed: {
    ...mapGetters(["nickName"]),
  },
  props: {
    interfaceIds: {
      type: String,
      default: () => null,
    },
    info: {
      type: Object,
      default: () => {},
    },
    isDetail: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      infoLoading: true,
      active: 0,
      stepList: [],
      title: "",
      dialogShow: false,
      list: [],
      records: [],
      buttonLoading: false,
      loading: false,
      status: null,

      details: {
        applyReason: "",
        introduce: "",
        fileList: [],
        systemName: "",
        onLineIntroduce: "",
        principal: "",
        isSensitive: "",
      },
      form: {
        status: 1,
        approveReason: "",
      },
      rules: {
        approveReason: [
          { required: true, message: "请输入理由", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择审批结果", trigger: "change" },
        ],
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      initFileList: [],
      overLimit: false,
      id: null,
    };
  },
  methods: {
    back() {
      this.$emit("close");
    },

    getInfoData() {
      let params = {
        id: this.info.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.infoLoading = true;
      this.queryData(params)
        .then((res) => {
          this.stepList = [
            {
              stepName: "创建审批",
              userName: "",
            },
            {
              stepName: "业务初审",
              userName: "",
            },
            {
              stepName: "安全复审",
              userName: "",
            },
            {
              stepName: "审批完成",
              userName: "",
            },
          ];
          this.active = this.info.step + 1;

          this.list = res.data;
          this.total = res.count;

          if (!this.records.length && res.records.length) {
            this.records = _deepClone(res.records);
            res.records.reverse().forEach((item, index) => {
              if (index < this.stepList.length) {
                this.stepList[index].userName = res.records[index]?.approveName;
                this.stepList[index].createTime =
                  res.records[index]?.createTime;
                this.stepList[index].status = res.records[index]?.status;
              }
            });
          }

          if (!this.details.systemName) {
            Reflect.ownKeys(this.details).forEach(
              (key) => (this.details[key] = res[key])
            );
          }
        })
        .finally(() => (this.infoLoading = false));
    },

    getList() {
      let params = {
        id: this.info.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.loading = true;
      this.queryData(params)
        .then((res) => {
          this.total = res.count;
          this.list = res.data;
        })
        .finally(() => (this.loading = false));
    },

    queryData(params) {
      return new Promise((reslove, reject) => {
        query(params)
          .then((res) => {
            if (res && (res.code === 200 || res.rescode === 200)) {
              reslove(res.data);
            } else {
              reject();
            }
          })
          .catch((err) => reject(err));
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            id: this.info.id,
            ...this.form,
          };
          this.buttonLoading = true;
          if (this.info.step === 1) {
            reExamine(params)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("操作成功");
                  this.$emit("refresh");
                } else {
                  this.$GlobalErrorConfirm("操作失败", res.msg);
                }
              })
              .finally(() => (this.buttonLoading = false));
          } else {
            edit(params)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("操作成功");
                  this.$emit("refresh");
                } else {
                  this.$GlobalErrorConfirm("操作失败", res.msg);
                }
              })
              .finally(() => (this.buttonLoading = false));
          }
        }
      });
    },

    hanldeClick(item) {
      this.download(
        "/system/api/apiExamine/downLoad",
        {
          fileUrl: item.filePath,
        },
        item.fileName
      ).finally(() => {});
    },

    hanldeDetail(row) {
      let params = {
        apiUrl: row.url,
        artificial: row.artificial,
      };
      this.$refs.assetDetail.showDetail(params);
    },
  },
  mounted() {
    // if (this.info.step === 2 && this.info.status === 2) {
    //   this.stepList = [
    //     {
    //       stepName: "创建审批",
    //       userName: "",
    //     },
    //     {
    //       stepName: "业务初审",
    //       userName: "",
    //     },
    //     {
    //       stepName: "审批完成",
    //       userName: "",
    //     },
    //   ];
    //   this.active = this.info.step;
    // } else {
    //   this.active = this.info.step + 1;
    // }
    this.getInfoData();
  },
};
</script>

<style scoped lang="scss">
::v-deep .global-common-edit-dialog-body {
  padding-top: 0;
}
.overview {
  width: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #606266;

  .item {
    width: 25%;
    display: flex;
    align-items: center;

    .item-label {
      max-width: calc(100% - 60px);
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
  }
}
.assetsDetailed {
  .apply-form {
    margin-top: 18px;
  }

  .apply {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 80px;
    }
  }
}

.container-border {
  padding: 18px;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.asset-online {
  height: calc(100% - 16px);

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .asset-online-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 20%;
    padding-top: 20px !important;
    overflow-y: scroll;
  }

  .asset-online-title {
    margin: 10px 0;
  }

  .overview {
    color: #606266;
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap !important;
  }

  .assetsDetailed-table {
    height: 300px;
    // max-height: 400px;
  }
}

.custom-step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-bottom: 30px;
  height: 90px;

  .step-item {
    position: relative;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-icon {
    position: absolute;
    top: -2px;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #eee;
  }

  .step-line {
    width: calc(100% - 20px);
    position: absolute;
    top: 0;
    left: calc(50% + 10px);
    height: 3px;
    background-color: #eee;
  }

  .step-info {
    width: 200px;
    position: absolute;
    top: 0px;
    left: calc(50% - 30px);
    margin-top: 16px;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    .info-describe {
      color: #999;
      font-size: 14px;
    }
  }
}

.files {
  color: var(--theme-color) !important;
  cursor: pointer;
}

.active-step-icon {
  background-color: var(--theme-color) !important;
}

.active-large {
  width: 12px !important;
  height: 12px !important;
  top: -4px !important;
}

.active-step-line {
  background-color: var(--theme-color) !important;
}

.active-step-next-line {
  width: calc(100% - 25px) !important;
  left: calc(50% + 15px) !important;
}

.active-step-info {
  color: #000 !important;
}

.active-color {
  color: #000 !important;
  font-weight: 600;
}
</style>
